<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 产品档案管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box" id="searchBox">
                <el-select v-model="query.selectType" placeholder="请选择检索类型" @keyup.enter.native="handleSearch"
                style="width:12%">
                    <el-option label="厂家" key="00"
                               value="00"></el-option>
                    <el-option label="供应商" key="01"
                               value="01"></el-option>
                    <el-option label="产品" key="02"
                               value="02"></el-option>
                </el-select>
                <el-input v-model="query.name" placeholder="名称" class="handle-input mr10"
                          @keyup.enter.native="handleSearch" style="width: 16%;margin-left: 6px"></el-input>
                <el-input v-model="query.createdAccount" placeholder="创建人" class="handle-input mr10"
                          @keyup.enter.native="handleSearch" style="width: 16%"></el-input>

                <!--复杂检索-->
                <el-row v-if="showAll" style="margin-bottom: 20px;margin-top: 20px">
                    <el-input v-model="query.adr" placeholder="地址" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 12%"></el-input>
                    <el-input v-model="query.proMarPriceMin" placeholder="市场价格最小值" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 15%;"></el-input>
                    <span>—&nbsp;&nbsp;</span>
                    <el-input v-model="query.proMarPriceMax" placeholder="市场价格最大值" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 15%"></el-input>
                </el-row>


                <el-input v-if="showAll" v-model="query.proNorName" placeholder="产品通用名称" class="handle-input mr10"
                          @keyup.enter.native="handleSearch" style="width: 12%;margin-bottom: 20px"></el-input>
                <el-input v-if="showAll" v-model="query.proSupPriceMin" placeholder="出厂价格最小值" class="handle-input mr10"
                          @keyup.enter.native="handleSearch" style="width: 15%"></el-input>
                <span v-if="showAll">—&nbsp;&nbsp;</span>
                <el-input v-if="showAll" v-model="query.proSupPriceMax" placeholder="出厂价格最大值" class="handle-input mr10"
                          @keyup.enter.native="handleSearch" style="width: 15%"></el-input>


                <el-button type="text" id="closeSearchBtn" @click="handleOut" style="margin-left: 20px">
                    {{word}}
                    <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
                </el-button>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>
                <div>
                    <div class="right-items" style="float: right;margin-right: 2px" v-if="roleId!=='view'">
                        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                    </div>
                    <div class="right-items" style="float: right;margin-right: 2px">
                        <el-button type="primary" icon="el-icon-folder" @click="handleCompare">产品对比</el-button>
                    </div>
                    <div class="right-items" style="float: right;margin-right: 2px">
                        <el-button type="primary" icon="el-icon-download" @click="handleLoading">导出</el-button>
                    </div>
                </div>

            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column
                        type="selection"
                        width="60">
                </el-table-column>
                <el-table-column prop="proId" label="产品编号" align="center" width="200"></el-table-column>
                <el-table-column prop="proName" label="产品名称" align="center" width="200"></el-table-column>
                <el-table-column prop="proNorName" label="产品通用名称" align="center" width="200"></el-table-column>
                <el-table-column prop="proMarPrice" label="市场价格" align="center"></el-table-column>
                <el-table-column prop="proSupPrice" label="出厂价格" align="center"></el-table-column>
                <el-table-column label="厂家信息" align="center" width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="factoryList(scope.$index, scope.row)"
                        >查看
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column label="供应商信息" align="center" width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="supplierList(scope.$index, scope.row)"
                        >查看
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column label="产品资质" align="center" width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="pictureList(scope.$index, scope.row)"
                        >操作
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAccount" label="创建人" align="center" width="120"></el-table-column>
                <el-table-column prop="createdTime" label="创建时间" align="center" width="160" sortable></el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-view"
                                @click="handleSee(scope.$index, scope.row)"
                        >查看
                        </el-button>
                        <el-button v-if="roleId!=='view'"
                                   type="text"
                                   icon="el-icon-edit"
                                   @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button v-if="roleId!=='view'"
                                   type="text"
                                   icon="el-icon-delete"
                                   class="red"
                                   @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 查看弹出框 -->
        <el-dialog title="查看" :visible.sync="seeVisible" width="50%" :before-close="closeSee">
            <el-form ref="seeForm" :model="seeForm" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品名称:" prop="proName">
                            <el-input disabled v-model="seeForm.proName" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品通用名称:" prop="proNorName">
                            <el-input disabled v-model="seeForm.proNorName" style="width:80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="厂家名称:" prop="manuName">
                            <el-input disabled v-model="seeForm.manuName" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="型号:" prop="proModel">
                            <el-input disabled v-model="seeForm.proModel" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出厂价格:" prop="proSupPrice">
                            <el-input disabled type="number" v-model="seeForm.proSupPrice"
                                      style="width: 80%"></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="市场价格:" prop="proMarPrice">
                            <el-input disabled type="number" v-model="seeForm.proMarPrice"
                                      style="width: 80%"></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="注册证编号:" prop="proRegNo">
                            <el-input disabled v-model="seeForm.proRegNo" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="技术分类:" prop="typeNm">
                            <el-input disabled v-model="seeForm.typeNm" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商名称:" prop="supIds">
                            <el-checkbox-group v-model="supIds" disabled>
                                <el-checkbox v-for="supplier in suppliers" :label="supplier.supId" :key="supplier.supId"
                                >{{supplier.supName}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="应用科室:" prop="labelIds">
                            <el-checkbox-group v-model="labelIds" disabled>
                                <el-checkbox v-for="labelDic in labelDics" :label="labelDic.labelId"
                                             :key="labelDic.labelId"
                                >{{labelDic.labelNm}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="参数名称:" prop="srmProParaEntitys">
                        <el-table :data="srmSeeProParaList" style="width: 100%"
                                  border>
                            <el-table-column prop="paraNm" label="属性" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled v-model="scope.row.paraNm" placeholder="属性"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prpaValue" label="值" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled v-model="scope.row.prpaValue" placeholder="值"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prpaRmk" label="备注" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled type="textarea" v-model="scope.row.prpaRmk"
                                              placeholder="无"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="适应症:" prop="proIndication">
                            <el-input type="textarea" disabled v-model="seeForm.proIndication"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="说明:" prop="proRmk">
                            <el-input type="textarea" disabled v-model="seeForm.proRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeSee">关闭</el-button>
            </span>
        </el-dialog>

        <!-- 新增弹出框 -->
        <el-dialog title="新增" :visible.sync="addVisible" width="50%" :before-close="closeAdd">
            <el-form ref="addForm" :rules="formRules" :model="addForm" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品名称:" prop="proName">
                            <el-input v-model="addForm.proName" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品通用名称:" prop="proNorName">
                            <el-input v-model="addForm.proNorName" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="厂家名称:" prop="manuId">
                            <el-select v-model="addForm.manuId" placeholder="请选择厂家" @change="selectSup"
                                       style="width: 80%">
                                <el-option v-for="factory in factorys" :label="factory.manuName" :key="factory.manuId"
                                           :value="factory.manuId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="型号:" prop="proModel">
                            <el-input v-model="addForm.proModel" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出厂价格:" prop="proSupPrice">
                            <el-input type="number" v-model="addForm.proSupPrice" style="width: 80%"></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="市场价格:" prop="proMarPrice">
                            <el-input type="number" v-model="addForm.proMarPrice" style="width: 80%"></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="注册证编号:" prop="proRegNo">
                            <el-input v-model="addForm.proRegNo" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="技术分类:" prop="typeId">
                            <el-tree
                                    ref="dataTree"
                                    :data="techTypes"
                                    show-checkbox
                                    check-strictly
                                    node-key="typeId"
                                    :props="defaultProps"
                                    @check="handleCheckChange"
                            >
                            </el-tree>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商名称:" prop="supIds">
                            <el-checkbox-group v-model="supIds">
                                <el-checkbox v-for="supplier in suppliers" :label="supplier.supId" :key="supplier.supId"
                                >{{supplier.supName}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="应用科室:" prop="labelIds">
                            <el-checkbox-group v-model="labelIds">
                                <el-checkbox v-for="labelDic in labelDics" :label="labelDic.labelId"
                                             :key="labelDic.labelId"
                                >{{labelDic.labelNm}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="margin-left:14%;margin-bottom: 14px">
                        <el-button type="primary" @click="addLine()">添加行数</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="参数名称:" prop="srmProParaEntitys" >
                        <el-table :data="srmProParaList" style="width: 100%"
                                  border>
                            <el-table-column prop="paraId" label="属性" align="center">
                                <template slot-scope="scope">
                                    <!--  <el-input v-model="scope.row.paraNm" placeholder="属性"></el-input>-->
                                    <el-select v-model="scope.row.paraId" placeholder="请选择参数" filterable
                                    >
                                        <el-option v-for="para in paraDic" :label="para.paraNm" :key="para.paraId"
                                                   :value="para.paraId"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prpaValue" label="值" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.prpaValue" placeholder="值"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prpaRmk" label="备注" align="center">
                                <template slot-scope="scope">
                                    <el-input type="textarea" v-model="scope.row.prpaRmk" placeholder="无"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.$index!==0" @click="deleteRow(scope.$index)">删除一行</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="适应症:" prop="proIndication">
                            <el-input type="textarea" v-model="addForm.proIndication"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="说明:" prop="proRmk">
                            <el-input type="textarea" v-model="addForm.proRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAdd">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="50%" :before-close="closeEdit">
            <el-form ref="editForm" :rules="formRules" :model="editForm" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品名称:" prop="proName">
                            <el-input v-model="editForm.proName" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品通用名称:" prop="proNorName">
                            <el-input v-model="editForm.proNorName" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="厂家名称:" prop="manuId">
                            <el-select v-model="editForm.manuId" placeholder="请选择厂家" @change="selectSup"
                                       style="width: 80%">
                                <el-option v-for="factory in factorys" :label="factory.manuName" :key="factory.manuId"
                                           :value="factory.manuId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="型号:" prop="proModel">
                            <el-input v-model="editForm.proModel" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出厂价格:" prop="proSupPrice">
                            <el-input type="number" v-model="editForm.proSupPrice" style="width: 80%"></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="市场价格:" prop="proMarPrice">
                            <el-input type="number" v-model="editForm.proMarPrice" style="width: 80%"></el-input>&nbsp;&nbsp;元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="注册证编号:" prop="proRegNo">
                            <el-input v-model="editForm.proRegNo" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="技术分类:" prop="typeId">
                            <el-tree
                                    ref="dataTree"
                                    :data="techTypes"
                                    show-checkbox
                                    check-strictly
                                    node-key="typeId"
                                    :default-checked-keys="defCheck"
                                    :props="defaultProps"
                                    @check="handleCheckChange"
                            >
                            </el-tree>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商名称:" prop="supIds">
                            <el-checkbox-group v-model="supIds">
                                <el-checkbox v-for="supplier in suppliers" :label="supplier.supId" :key="supplier.supId"
                                >{{supplier.supName}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="应用科室:" prop="labelIds">
                            <el-checkbox-group v-model="labelIds">
                                <el-checkbox v-for="labelDic in labelDics" :label="labelDic.labelId"
                                             :key="labelDic.labelId"
                                >{{labelDic.labelNm}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="margin-left:14%;margin-bottom: 14px">
                        <el-button type="primary" @click="addEditLine()">添加行数</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="参数名称:" prop="srmProParaEntitys">
                        <el-table :data="srmEditProParaList" style="width: 100%"
                                  border>
                            <el-table-column prop="paraId" label="属性" align="center">
                                <template slot-scope="scope">
                                    <!-- <el-input v-model="scope.row.paraNm" placeholder="属性"></el-input>-->
                                    <el-select v-model="scope.row.paraId" placeholder="请选择参数" filterable
                                    >
                                        <el-option v-for="para in paraDic" :label="para.paraNm" :key="para.paraId"
                                                   :value="para.paraId"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prpaValue" label="值" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.prpaValue" placeholder="值"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prpaRmk" label="备注" align="center">
                                <template slot-scope="scope">
                                    <el-input type="textarea" v-model="scope.row.prpaRmk" placeholder="无"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.$index!==0" @click="deleteEditRow(scope.$index,scope.row)">
                                        删除一行
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="适应症:" prop="proIndication">
                            <el-input type="textarea" v-model="editForm.proIndication"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="说明:" prop="proRmk">
                            <el-input type="textarea" v-model="editForm.proRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="closeEdit">取 消</el-button>
                 <el-button type="primary" @click="saveEdit">确 定</el-button>
             </span>
        </el-dialog>

        <!--查看该产品厂家所有信息-->
        <el-dialog title="厂家信息" :visible.sync="factVisible" width="40%" :before-close="closeFactory">
            <el-form ref="factoryForm" :model="factoryForm" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="厂家名称:" prop="manuName">
                            <el-input disabled v-model="factoryForm.manuName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="厂家地址:" prop="manuAdr">
                            <el-input disabled v-model="factoryForm.manuAdr"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="联系人:" prop="srmContactsEntitys">
                        <el-table :data="srmContactsList" style="width: 100%"
                                  border>
                            <el-table-column prop="conName" label="姓名" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled v-model="scope.row.conName" placeholder="姓名"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="conPhone" label="电话" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled v-model="scope.row.conPhone" placeholder="电话"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="conRmk" label="备注" align="center">
                                <template slot-scope="scope">
                                    <el-input type="textarea" disabled v-model="scope.row.conRmk"
                                              placeholder="备注"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注说明:" prop="manuRmk">
                            <el-input type="textarea" disabled v-model="factoryForm.manuRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeFactory">关闭</el-button>
            </span>
        </el-dialog>

        <!--查看供应商弹出框-->
        <el-dialog :title="title+'供应商信息'" :visible.sync="supVisible" width="60%" :before-close="closeSup">
            <el-input v-if="isSup" v-model="suppQuery.supName" placeholder="供应商名称" class="handle-input mr10"
                      @keyup.enter.native="handleSuppSearch" style="width: 180px;margin-bottom: 10px"></el-input>
            <el-button v-if="isSup" type="primary" icon="el-icon-search" @click="handleSuppSearch">搜索</el-button>
            <el-button v-if="isSup" type="el-button" icon="el-icon-delete" @click="handleSuppReset">重置</el-button>
            <el-table v-if="isSup"
                      :data="supData"
                      border
                      class="table"
                      ref="supData"
                      header-cell-class-name="table-header"
            >
                <el-table-column prop="supId" label="供应商编号" align="center"></el-table-column>
                <el-table-column prop="supName" label="供应商名称" align="center"></el-table-column>
                <el-table-column prop="supAdr" label="供应商地址" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-view"
                                @click="seeSup(scope.$index, scope.row)"
                        >查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="isSup" class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="suppQuery.pageIndex"
                        :page-size="suppQuery.pageSize"
                        :total="suppPageTotal"
                        @current-change="handleSuppPageChange"
                ></el-pagination>
            </div>
            <el-form v-if="isSee" ref="supForm" :model="supForm" label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商名称:" prop="supName">
                            <el-input disabled v-model="supForm.supName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="供应商地址:" prop="supAdr">
                            <el-input disabled v-model="supForm.supAdr"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="联系人:" prop="srmContactsEntitys">
                        <el-table :data="srmSupContactsList" style="width: 100%"
                                  border>
                            <el-table-column prop="conName" label="姓名" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled v-model="scope.row.conName" placeholder="姓名"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="conPhone" label="电话" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled v-model="scope.row.conPhone" placeholder="电话"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="conRmk" label="备注" align="center">
                                <template slot-scope="scope">
                                    <el-input disabled type="textarea" v-model="scope.row.conRmk"
                                              placeholder="备注"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注说明:" prop="supRmk">
                            <el-input type="textarea" disabled v-model="supForm.supRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" v-if="isSee" class="dialog-footer">
                <el-button type="primary" @click="returnSup">返回列表</el-button>
            </span>
            <span slot="footer" v-if="isSup" class="dialog-footer">
                <el-button type="primary" @click="closeSup">关闭</el-button>
            </span>
        </el-dialog>

        <!--对比产品-->
        <el-dialog title="参数对比" :visible.sync="compareVisible" width="80%" :before-close="closeCompare">
            <el-table
                    :data="compareData"
                    border
                    class="table"
                    height="450"
                    ref="compareData"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="paraNm" label="参数" align="center"></el-table-column>
                <el-table-column v-for="(sel,index) in multipleSelection" :label="sel.proName" :key="sel.proId"
                                 align="center">
                    <template slot-scope="scope">
                        <span v-for="(item2,index2) in scope.row.srmProParaEntitiys" v-if="sel.proId == item2.fkId "> {{ scope.row.srmProParaEntitiys[index2].prpaValue }} </span>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" v-if="isSup" class="dialog-footer">
                <el-button type="primary" @click="closeCompare">关闭</el-button>
            </span>
        </el-dialog>

        <!--放大图片-->
        <el-dialog title="图片" :visible.sync="showImg" width="50%">
            <BigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></BigImg>
        </el-dialog>

        <!--产品资质-->
        <el-dialog title="产品资质" :visible.sync="pictureVisible" width="40%" :before-close="closePic">
            <el-form ref="pictureForm" :model="pictureForm" label-width="90px">
                <el-row v-for="(pic,i) in pictures" :key="i">
                    <el-col :span="24">
                        <el-form-item :label="pic.picDicName+':'" prop="picName">
                             <span slot="label">
                                 <span style="color: red;margin-right: 4px">*</span>{{pic.picDicName}}:
                                 </span>
                            <div class="user-header" v-if="pic.picDicType=='00'">
                                <input type="file" name="image" accept="image/*"
                                       @change='onchangeImgFun'
                                       @click="picClick(pic,i)"
                                       class="header-upload-btn user-header-com">
                                <img :src="require('../assets/img/upload.png')"
                                     class="user-header-img user-header-com">
                                <img alt="" :src="picObjList[i]!==undefined && picObjList[i].imgurl!==undefined && picObjList[i].imgurl!==''?picObjList[i].imgurl:''" v-if="picObjList[i]!==undefined && picObjList[i].imgurl!==undefined && picObjList[i].imgurl!==''"
                                     class="user-header-img user-header-com" @click="clickImg($event)">
                                <div style="clear:both;margin-left: 140px;margin-bottom: 14px">
                                    <el-button
                                            v-if="picObjList[i]!==undefined && picObjList[i].picId!==undefined && picObjList[i].picId!==''"
                                            @click="deletePicture(i,picObjList[i])">删除
                                    </el-button>
                                </div>
                            </div>
                            <el-button v-if="pic.picDicType=='01'" type="primary" @click="showPdf(i,picObjList[i])"
                                       style="margin-bottom: 10px;">预览
                            </el-button>
                            <el-button v-if="pic.picDicType=='01'" type="primary" @click="handleLoad(i,picObjList[i])"
                                       style="margin-bottom: 10px">下载
                            </el-button>
                            <el-upload v-if="pic.picDicType=='01'"
                                       class="upload-demo"
                                       drag
                                       :limit="1"
                                       :on-remove="(file, fileList) => {handleRemove(file, fileList, i)}"
                                       :on-exceed="handleExceed"
                                       action=""
                                       :data="{index:i}"
                                       :http-request="handlePost"
                                       :before-upload="beforeUpload"
                                       accept=".pdf"
                                       :file-list="picObjList[i].file"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text"><em>点击上传</em></div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="closePic">取 消</el-button>
                 <el-button type="primary" @click="savePic">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="预览" :visible.sync="pdfDlgVisible" width="60%">
            <el-button style="font-size: 20px" @click="closePicSee">关闭</el-button>
            <div style="text-align: center">
                <span style="margin-right: 20px;font-size: 20px">{{currentPage}} / {{pageCount}}</span>
                <el-button style="margin-right: 12px;font-size: 20px" @click="change1">上一页</el-button>
                <el-button style="font-size: 20px" @click="change2">下一页</el-button>
            </div>

            <br>
            <pdf
                    :src="src"
                    :page="currentPage"
                    @num-pages="pageCount=$event"
                    @page-loaded="currentPage=$event"
                    @loaded="loadPdfHandler">
            </pdf>
            <span slot="footer" class="dialog-footer">
                <el-button style="font-size: 20px" @click="closePicSee">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {productData, doAdd, doUpdate, doDelete, selectOnePro, compareData, doDeletePara,excelPro} from '../api/product';
    import {selectByManuId, selectAll} from "../api/factory";
    import {selectOneSup, selectAllSupBy, selectSupAll, excelSup} from '../api/supplier';
    import {selectAllTech} from '../api/techType';
    import {selectAllLable} from '../api/deptment';
    import {slectAllPicDic} from '../api/mustpic';
    import {slectAllPara} from '../api/para';
    import {selectPictureByFkId, doAddPicture, doDeletePicture, showPdf} from '../api/picture';
    import BigImg from '../components/BigImg';
    import pdf from 'vue-pdf'

    export default {
        name: 'user',
        data() {
            return {
                roleId: localStorage.getItem('ms_roleId'),
                query: {
                    selectType: '02', //00：厂家 01：供应商 02：产品
                    name: '', // 名称 如果选择厂家 是厂家名称，如果是产品是产品名称
                    createdAccount: '',  //创建人账号
                    adr: '', //地址：只有厂家和供应商有地址，选择产品时，地址无用
                    proMarPriceMin: null,  // 市场价格最小值
                    proMarPriceMax: null, //市场价格最大值
                    proNorName: '', //产品通用名称
                    proSupPriceMin: null, //出厂价格最小值
                    proSupPriceMax: null,//出厂价格最大值
                    pageIndex: 1,
                    pageSize: 10
                },
                suppQuery: {
                    supIds: '',
                    supName: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                suppPageTotal: 0,
                tableData: [],
                compareData: [],
                multipleSelection: [],
                editVisible: false,
                addVisible: false,
                seeVisible: false,
                factVisible: false,
                supVisible: false,
                compareVisible: false,
                pictureVisible: false,
                pictures: [],
                isSup: true,
                isSee: false,
                pageTotal: 0,
                supData: [],
                addForm: {},
                editForm: {},
                factoryForm: {},
                srmContactsList: [],
                supForm: {},
                pictureForm: {},
                srmSupContactsList: [],
                title: '',
                idx: -1,
                id: -1,
                fkId: '',
                tableTabsValue: '1',
                factorys: [],
                techTypes: [],
                suppliers: [],
                labelDics: [],
                labelIds: [],
                supIds: [],
                seeForm: {},
                srmSeeProParaList: [],
                srmEditProParaList: [],
                defCheck: [],
                paraDic: [],
                imgurl: '',
                otherImgUrl: '',
                picObjList: [],
                picObj: {},
                showImg: false,
                src: '',
                pdfDlgVisible: false,
                imgSrc: '',
                fileSize: 0,
                fileList: [],
                currentPage: 0, // pdf文件页码
                pageCount: 0, // pdf文件总页数
                srmProParaList: [
                    {
                        paraId: '',
                        prpaValue: '',
                        prpaRmk: ''
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'typeNm',
                    id: 'typeId'
                },
                typeNm: '',
                showAll: true,//是否展开全部
                proName:'',//下载pdf的产品名称
                formRules: {
                    proName: [
                        {required: true, message: '请输入产品名称', trigger: 'blur'},
                    ],
                    manuId: [
                        {required: true, message: '请选择厂家', trigger: 'blur'},
                    ],
                },
            };
        },
        created() {
            this.getData();
        },
        computed: {
            word: function () {
                if (this.showAll == false) {
                    //对文字进行处理
                    return "展开搜索";
                } else {
                    return "收起搜索";
                }
            }
        },
        mounted() {
            /**
             * 收起搜索
             */
            this.$nextTick(function () {
                this.handleOut();
            });
        },
        components: {
            BigImg,
            pdf
        },
        methods: {
            change1() {
                if (this.currentPage > 1) {
                    this.currentPage--
                }
            },
            change2() {
                if (this.currentPage < this.pageCount) {
                    this.currentPage++
                }
            },
            // 获取后台数据
            getData() {
                productData(this.query).then(res => {
                    console.log("----productData-----", this.query);
                    if (res.success == true) {
                        this.tableData = res.data;
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            /*展开*/
            handleOut() {
                this.showAll = !this.showAll;
                console.log("showAll", this.showAll);
                var searchBoxHeght = document.getElementById("searchBox");
                if (this.showAll == false) {
                    searchBoxHeght.style.height = 60 + "px";
                } else {
                    searchBoxHeght.style.height = "auto";
                }
            },
            // 触发重置按钮
            handleReset() {
                this.query.selectType = "02";
                this.query.name = "";
                this.query.createdAccount = "";
                this.query.adr = "";
                this.query.proMarPriceMin = null;
                this.query.proMarPriceMax = null;
                this.query.proNorName = "";
                this.query.proSupPriceMin = null;
                this.query.proSupPriceMax = null;
                this.getData();
            },
            // 触发搜索供应商按钮
            handleSuppSearch() {
                this.$set(this.suppQuery, 'pageIndex', 1);
                selectSupAll(this.suppQuery).then(res => {
                    console.log("selectSupAll--this.suppQuery", this.query);
                    if (res.success == true) {
                        this.supData = res.data;
                        this.suppPageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.supData = [];
                        this.suppPageTotal = 0;
                    }
                });
            },
            // 触发重置供应商
            handleSuppReset() {
                this.suppQuery.supName = "";
                selectSupAll(this.suppQuery).then(res => {
                    console.log("selectSupAll--this.suppQuery", this.query);
                    if (res.success == true) {
                        this.supData = res.data;
                        this.suppPageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.supData = [];
                        this.suppPageTotal = 0;
                    }
                });
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        //后台进行删除操作
                        doDelete({"proId": row.proId}).then(res => {
                            if (res.success) {
                                this.$message.success('删除成功');
                                this.getData();
                            } else {
                                this.$message.error('删除失败');
                                this.getData()                                                                                                                                                                   ;
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消删除'
                        });
                    });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            /*产品对比弹出框*/
            handleCompare() {
                if (this.multipleSelection.length > 0) {
                    /*根据传入的proId*/
                    let proIds = [];
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        proIds.push(this.multipleSelection[i].proId);
                    }
                    ;
                    let proIdss = proIds + '';
                    compareData({"proIds": proIds + ''}).then(res => {
                        if (res.success == true) {
                            this.compareData = res.data;
                            this.compareVisible = true;
                        } else {
                            this.$message.error("查询失败！");
                        }
                    });

                } else {
                    this.$message.warning("请选择一个或者多个产品进行参数对比");
                }

            },

            /*关闭参数对比*/
            closeCompare() {
                this.multipleSelection = [];
                this.compareVisible = false;
                this.getData();
            },

            // 新增操作
            async handleAdd() {
                this.addForm = {};
                this.addVisible = true;
                /*查询所有厂家*/
                await selectAll().then(res1 => {
                    if (res1.success) {
                        this.factorys = res1.data;
                        /*查询所有技术分类*/
                        selectAllTech().then(res2 => {
                            if (res2.success) {
                                this.techTypes = res2.data;
                                /*查询所有应用科室*/
                                selectAllLable().then(res3 => {
                                    if (res3.success) {
                                        this.labelDics = res3.data;
                                        /*查询所有参数 不分页*/
                                        slectAllPara().then(res4 => {
                                            if (res4.success) {
                                                this.paraDic = res4.data;
                                                console.log("paraDic", this.paraDic);
                                            } else {
                                                this.$message.error('查询参数失败');
                                            }
                                        });
                                    } else {
                                        this.$message.error('查询应用科室失败');
                                    }
                                });
                            } else {
                                this.$message.error('查询技术分类失败');
                            }
                        });
                    } else {
                        this.$message.error('查询厂家失败');
                    }
                });
            },

            /*新增用户*/
            saveAdd() {
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        let supIds = this.supIds + '';
                        let labelIds = this.labelIds + '';
                        this.$set(this.addForm, 'supIds', supIds);
                        this.$set(this.addForm, 'labelIds', labelIds);
                        this.$set(this.addForm, 'srmProParaEntitys', this.srmProParaList);
                        console.log("参数------", this.srmProParaList);
                        this.$set(this.addForm, 'typeId', this.$refs.dataTree.getCheckedKeys() + '');
                        this.$set(this.addForm, 'typeNm', this.typeNm);
                        console.log("新增的产品：---", this.addForm);
                        //新增form表单提交到后台
                        doAdd(this.addForm).then(res => {
                            if (res.success) {
                                this.addVisible = false;
                                this.addForm = {};
                                this.suppliers = [];
                                this.supIds = [];
                                this.labelDics = [];
                                this.labelIds = [];
                                this.typeNm = "";
                                this.$refs.dataTree.setCheckedKeys([]);
                                this.srmProParaList = [
                                    {
                                        paraId: '',
                                        prpaValue: '',
                                        prpaRmk: ''
                                    }
                                ];
                                this.getData();
                                this.$message.success('保存成功');
                            } else {
                                this.$message.error('保存失败');
                            }
                        });
                    }
                });
            },
            closeAdd() {//关闭新增弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.addVisible = false;
                        this.addForm = {};
                        this.suppliers = [];
                        this.supIds = [];
                        this.labelDics = [];
                        this.labelIds = [];
                        this.typeNm = "";
                        this.$refs.dataTree.setCheckedKeys([]);
                        this.srmProParaList = [
                            {
                                paraId: '',
                                prpaValue: '',
                                prpaRmk: ''
                            }
                        ];
                        this.getData();
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            // 编辑操作
            async handleEdit(index, row) {
                this.idx = index;
                await selectOnePro({proId: row.proId}).then(res => {
                    if (res.success == true) {
                        this.editForm = res.data;
                        console.log("-----", this.editForm);
                        /*查询所有厂家*/
                        selectAll().then(res1 => {
                            if (res1.success) {
                                this.factorys = res1.data;
                                console.log("11111查询所有厂家", this.factorys);
                                /*查询所有技术分类*/
                                selectAllTech().then(res2 => {
                                    if (res2.success) {
                                        this.defCheck = [];
                                        this.techTypes = res2.data;
                                        this.defCheck.push(this.editForm.typeId);
                                        console.log("22222查询所有技术分类", this.techTypes);
                                        /*查询所有应用科室*/
                                        selectAllLable().then(res3 => {
                                            if (res3.success) {
                                                this.labelDics = res3.data;
                                                this.labelIds = res.data.labelIds.split(",");
                                                this.supIds = res.data.supIds.split(",");
                                                console.log("33333查询所有应用供应商", this.supIds);
                                                this.srmEditProParaList = res.data.srmProParaEntitys;
                                                console.log("编辑查询到的所有参数", this.srmEditProParaList);
                                                if (this.srmEditProParaList.length == 0) {
                                                    this.srmEditProParaList = [{
                                                        paraId: '',
                                                        prpaValue: '',
                                                        prpaRmk: ''
                                                    }];
                                                }
                                                ;
                                                selectAllSupBy({manuId: this.editForm.manuId}).then(res4 => {
                                                    if (res4.success == true) {
                                                        this.suppliers = res4.data;
                                                        console.log("查询到的所有供应商", this.suppliers);
                                                        /*查询所有参数 不分页*/
                                                        slectAllPara().then(res5 => {
                                                            if (res5.success) {
                                                                this.paraDic = res5.data;
                                                                this.editVisible = true;
                                                                console.log("paraDic", this.paraDic);
                                                            } else {
                                                                this.$message.error('查询参数失败');
                                                            }
                                                        });
                                                    } else {
                                                        this.$message.error('查询供应商失败');
                                                    }
                                                });

                                            } else {
                                                this.$message.error('查询应用科室失败');
                                            }
                                        });
                                    } else {
                                        this.$message.error('查询技术分类失败');
                                    }
                                });
                            } else {
                                this.$message.error('查询厂家失败');
                            }
                        });
                    } else {
                        this.$message.error('查询产品信息失败');
                    }
                });
            },
            closeEdit() {//关闭编辑弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.editVisible = false;
                        this.editForm = {};
                        this.getData();
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            // 保存编辑
            saveEdit() {
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {   //form表单提交到后台
                        let supIds = this.supIds + '';
                        let labelIds = this.labelIds + '';
                        this.$set(this.editForm, 'supIds', supIds);
                        this.$set(this.editForm, 'labelIds', labelIds);
                        this.$set(this.editForm, 'srmProParaEntitys', this.srmEditProParaList);
                        this.$set(this.editForm, 'typeId', this.$refs.dataTree.getCheckedKeys() + '');
                        this.$set(this.editForm, 'typeNm', this.typeNm);
                        console.log("编辑的技术分类：---", this.editForm);
                        doUpdate(this.editForm).then(res => {
                            if (res.success) {
                                this.editForm = {};
                                this.getData();
                                this.editVisible = false;
                                this.$message.success('编辑成功');
                            } else {
                                this.$message.error('编辑失败');
                            }
                        });
                    }
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
            // 供应商分页导航
            handleSuppPageChange(val) {
                this.$set(this.suppQuery, 'pageIndex', val);
                selectSupAll(this.suppQuery).then(res => {
                    console.log("selectSupAll--this.suppQuery", this.query);
                    if (res.success == true) {
                        this.supData = res.data;
                        this.suppPageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.supData = [];
                        this.suppPageTotal = 0;
                    }
                });
            },
            /*查看厂家*/
            factoryList(index, row) {
                console.log("查看厂家---", row.manuId);
                selectByManuId({manuId: row.manuId}).then(res => {
                    if (res.success == true) {
                        this.factoryForm = res.data;
                        this.srmContactsList = res.data.srmContactsEntitys;
                        this.factVisible = true;
                    } else {
                        this.$message.error('查询厂家失败');
                    }
                });
            },
            /*关闭查看厂家弹出框*/
            closeFactory() {
                this.factVisible = false;
            },
            /*查看产品的供应商弹出框*/
            supplierList(index, row) {
                console.log("supIds--supIds", row.supIds);
                this.suppQuery.supIds = (row.supIds==undefined || row.supIds=='')?"000000":row.supIds;
                selectSupAll(this.suppQuery).then(res => {
                    console.log("selectSupAll--this.suppQuery", this.suppQuery);
                    if (res.success == true) {
                        this.supData = res.data;
                        this.suppPageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.supData = [];
                        this.suppPageTotal = 0;
                    }
                    this.supVisible = true;
                });
            },

            /*查看单个供应商信息*/
            seeSup(index, row) {
                selectOneSup({supId: row.supId}).then(res => {
                    if (res.success == true) {
                        this.supForm = res.data;
                        this.srmSupContactsList = res.data.srmContactsEntitys;
                        this.isSup = false;
                        this.isSee = true;
                    } else {
                        this.$message.error('查询供应商具体信息失败');
                    }
                });
            },
            /*关闭查看供应商弹出框*/
            closeSup() {
                this.supVisible = false;
                this.isSup = true;
                this.isSee = false;
            },
            /*返回供应商列表*/
            returnSup() {
                this.isSup = true;
                this.isSee = false;
            },

            /*新增联系人行数*/
            addLine() {
                let row = {
                    paraId: '',
                    prpaValue: '',
                    prpaRmk: ''
                };
                this.srmProParaList.push(row);
            },
            /*删除联系人行数*/
            deleteRow(i) {
                this.srmProParaList.splice(i, 1);
            },
            /*+编辑参数行数*/
            addEditLine() {
                let row = {
                    paraId: '',
                    prpaValue: '',
                    prpaRmk: ''
                };
                this.srmEditProParaList.push(row);
            },
            /*-编辑参数行数*/
            deleteEditRow(i, row) {
                console.log("deleteEditRow---", row.prpaId);
                if (row.prpaId !== undefined) {
                    //后台进行删除产品参数操作
                    doDeletePara({"prpaId": row.prpaId}).then(res => {
                        if (res.success) {
                            this.$message.success('删除成功');
                            this.srmEditProParaList.splice(i, 1);
                        } else {
                            this.$message.error('删除失败');
                        }
                    });
                } else {
                    this.srmEditProParaList.splice(i, 1);
                }
            },

            /*根据厂家ID灵活查询对应供应商*/
            selectSup(val) {
                selectAllSupBy({manuId: val}).then(res => {
                    if (res.success == true) {
                        this.suppliers = res.data;
                        this.defCheck = [];
                        console.log("this.defCheck", this.defCheck);
                    } else {
                        this.$message.error('查询供应商失败');
                    }
                });
            },
            /*查看产品信息*/
            handleSee(index, row) {
                selectOnePro({proId: row.proId}).then(res => {
                    if (res.success == true) {
                        console.log("----查看产品信息----", res.data);
                        this.seeForm = res.data;
                        this.suppliers = res.data.srmSupInfoEntitys;
                        this.supIds = res.data.supIds.split(",");
                        this.labelDics = res.data.srmLabelDicEntitys;
                        this.labelIds = res.data.labelIds.split(",");
                        this.srmSeeProParaList = res.data.srmProParaEntitys;
                        this.seeVisible = true;
                    } else {
                        this.$message.error('查询供应商具体信息失败');
                    }
                });
            },
            /*关闭查看产品信息弹出框*/
            closeSee() {
                this.seeVisible = false;
            },
            handleCheckChange: function (a, b) {
                if (b.checkedKeys.length > 0) {
                    this.$refs.dataTree.setCheckedKeys([a.typeId]);
                    this.typeNm = [a.typeNm] + '';
                }
            },
            /*查看产品资质*/
            async pictureList(index, row) {
                this.fileList = [];
                this.picObjList = [];
                this.fkId = row.proId;
                this.proName=row.proName;
                /*查询所有产品必传附件 不分页*/
                await slectAllPicDic({"picTypes": "02"}).then(res => {
                    if (res.success) {
                        selectPictureByFkId({"fkId": row.proId}).then(res1 => {
                            if (res1.success) {
                                for (let i = 0; i < res.data.length; i++) {
                                    let picObj = {};
                                    picObj.fkId = row.proId;
                                    picObj.picId = '';
                                    picObj.picDicId = res.data[i].picDicId;
                                    picObj.imgurl = '';
                                    picObj.picAdr = "";
                                    picObj.file = [];
                                    picObj.picName = res.data[i].picDicName;
                                    if (res1.data.length !== 0) {
                                        let file = {};
                                        for (let j = 0; j < res1.data.length; j++) {
                                            if (res.data[i].picDicName == res1.data[j].picName) {
                                                if (res.data[i].picDicType == "00") {
                                                    picObj.picId = res1.data[j].picId;
                                                    picObj.imgurl = 'data:image/' + res1.data[j].picImgTp + ';base64,' + res1.data[j].picImgData;
                                                } else {
                                                    picObj.picId = res1.data[j].picId;
                                                    picObj.picAdr = res1.data[j].picAdr;
                                                    file.name = row.proName+'-'+res1.data[j].picName;
                                                    let fileList = [];
                                                    fileList.push(file);
                                                    picObj.file = fileList;
                                                }
                                            }
                                        }
                                        this.picObjList.push(picObj);
                                    } else {
                                        this.picObjList.push(picObj);
                                    }
                                }
                                this.pictures = res.data;
                            }
                        });
                    } else {
                        this.$message.error('查询必传附件列表失败');
                    }
                });
                this.pictureVisible = true;
            },
            /*头像上传 新增时*/
            onchangeImgFun(e) {
                let file = e.target.files[0];
                // 获取图片的大小，做大小限制有用
                let imgSize = file.size;
                let _this = this;// this指向问题，所以在外面先定义
                // 比如上传头像限制5M大小，这里获取的大小单位是b
                // base64方法 2
                let reader = new FileReader();
                reader.readAsDataURL(file); // 读出 base64
                reader.onloadend = function () {
                    // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
                    let dataURL = reader.result;
                    _this.picObj.picImgData = dataURL.substring(dataURL.indexOf(",") + 1);
                    _this.picObj.picImgTp = dataURL.substring(dataURL.indexOf("/") + 1, dataURL.indexOf(";"));
                    _this.picObj.picImgLen = imgSize;
                    /*整理formData*/
                    let formData = new FormData();
                    console.log("----------_this.picObj.picId------",_this.picObj.picId);
                    formData.append("picId", _this.picObj.picId);
                    formData.append("fkId", _this.picObj.fkId);
                    formData.append("picType", "00");
                    formData.append("picName", _this.picObj.picName);
                    formData.append("picImgData", _this.picObj.picImgData);
                    formData.append("picImgTp", _this.picObj.picImgTp);
                    formData.append("picImgLen", _this.picObj.picImgLen);
                    //新增form表单提交到后台
                    doAddPicture(formData).then(res => {
                        if (res.success) {
                            _this.picObj.imgurl = dataURL;
                            _this.picObj.picId = res.data.picId;
                            _this.$message.success('上传图片成功');
                        } else {
                            _this.$message.error('上传图片失败');
                        }
                    });
                }
            },
            /*点击上传按钮时，处理*/
            picClick(pic, i) {
                let picObj = this.picObjList[i];
                this.picObj = picObj;
            },
            /*头像删除时*/
            deletePicture(i, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        //后台进行删除操作
                        doDeletePicture({"picId": row.picId}).then(res => {
                            if (res.success) {
                                this.picObjList[i].picImgData = '';
                                this.picObjList[i].picImgTp = '';
                                this.picObjList[i].picImgLen = '';
                                this.picObjList[i].imgurl = '';
                                this.picObjList[i].picId = '';
                                this.$message.success('删除成功');
                            } else {
                                this.$message.error('删除失败');
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消删除'
                        });
                    });
            },

            handlePost(item) {
                this.fileSize = this.fileSize + 1;
                /*整理formData*/
                let formData = new FormData();
                formData.append("fkId", this.fkId);
                formData.append("picName", this.picObjList[item.data.index].picName);
                formData.append("picImgLen", item.file.size);
                formData.append("picType", "01");
                formData.append("file", item.file);
                //新增form表单提交到后台
                doAddPicture(formData).then(res => {
                    if (res.success) {
                        this.picObjList[item.data.index].picId = res.data.picId;
                        this.picObjList[item.data.index].picAdr = res.data.picAdr;
                        this.$message.success('上传PDF成功');
                    } else {
                        this.$message.error('上传PDF失败');
                    }
                });
            },
            handleExceed() {
                this.$message.warning("当前只能上传一个文件");
            },
            /*删除pdf*/
            handleRemove(file, fileList, i) {
                if (this.picObjList[i].picId !== "") {
                    //后台进行删除操作
                    doDeletePicture({"picId": this.picObjList[i].picId}).then(res => {
                        if (res.success) {
                            this.picObjList[i].picId = '';
                            this.picObjList[i].picAdr = '';
                            /*this.picObjList[i].picName = '';
                            this.picObjList[i].picId = '';*/
                            this.fileSize = this.fileSize - 1;
                            this.$message.success('删除成功');
                        } else {
                            this.$message.error('删除失败');
                        }
                    });
                }
            },
            beforeUpload(file) {
                let extension = file.name.split(".");
                if (extension[extension.length - 1] !== "pdf") {
                    this.$message.error('请上传PDF类型的文件');
                    return false;
                }
                ;
            },

            /*展示pdf*/
            showPdf(index, row) {
                if (row.picAdr !== undefined && row.picAdr !== '') {
                    //后台进行删除操作
                    showPdf({"picAdr": row.picAdr}).then(res => {
                        this.src = this.getObjectURL(res);
                        this.currentPage = 1;// 首先加载第一页
                        this.pdfDlgVisible = true
                    });
                } else {
                    this.$message.warning('请上传PDF类型的文件');
                }
            },

            // pdf加载时
            loadPdfHandler(e) {
                this.currentPage = 1 // 加载的时候先加载第一页
            },

            // 处理文件流
            getObjectURL(file) {
                let url = null
                if (window.createObjectURL !== undefined) { // basic
                    url = window.createObjectURL(file)
                } else if (window.webkitURL !== undefined) { // webkit or chrome
                    try {
                        url = window.webkitURL.createObjectURL(file)
                    } catch (error) {
                        console.log(error)
                    }
                } else if (window.URL !== undefined) { // mozilla(firefox)
                    try {
                        url = window.URL.createObjectURL(file)
                    } catch (error) {
                        console.log(error)
                    }
                }
                return url
            },

            /*关闭弹出框*/
            closePicSee() {
                this.pdfDlgVisible = false;
            },

            //    下载
            handleLoad(index, row) {
                let fileName=this.proName+'-'+row.picName;
                console.log("下载的fileNm",fileName);
                if (row.picAdr!==undefined && row.picAdr!==''){
                    window.location.href = "/api/srm/file/getPdf?picAdr=" + row.picAdr+'&fileName='+fileName;
                }else {
                    this.$message.warning('未上传下载的附件，请上传');
                }
            },
            closePic() {//关闭产品资质弹出框
                this.$confirm('确认关闭该弹出框？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.pictureVisible = false;
                        this.proName='';
                        this.getData();
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            /*保存文件 校验每个必传附件是否已经都上传*/
            savePic() {
                let list = this.picObjList;
                for (let j = 0; j < list.length; j++) {
                    if (list[j].picId !== '') {
                        if ((j + 1) == list.length) {
                            this.pictureVisible = false;
                            this.$message.success('必传附件上传成功');
                        }
                    } else {
                        this.$message.warning('必传附件未全部上传完成');
                        return;
                    }
                }
            },
            clickImg(e) {
                this.showImg = true;
                // 获取当前图片地址
                this.imgSrc = e.currentTarget.src;
            },
            viewImg() {
                this.showImg = false;
            },
            /*导出*/
            handleLoading() {
                if (this.multipleSelection.length > 0) {
                    let proIds=[];
                    for (let i=0;i<this.multipleSelection.length;i++){
                        proIds.push(this.multipleSelection[i].proId);
                    }
                    //调用后台
                    console.log("proIds",proIds.join(","));
                    window.location.href = "/api/srm/excel/exportProExcel?proIds=" + proIds.join(",");
                }else {
                    this.$message.warning("请选择一个或者多个厂家进行导出详情");
                }
            },
        }
    };
</script>

<style scoped>


    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
        /*border-radius 属性允许您为元素添加圆角边框！*/
        border-radius: 6px;
        background-clip: padding-box;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    /*头像上传*/
    .user-header {
        position: relative;
        display: inline-block;
    }

    .user-header-com {
        width: 100px;
        height: 100px;
        /*    border-radius: 50%;*/
        display: inline-block;
        margin-left: 10px;
    }

    .header-upload-btn {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
    }

    #searchBox {
        overflow: hidden;
        margin-bottom: 10px;
    }
</style>
